<script setup lang="ts">
import { ref } from 'vue'
import { showToast, showNotify } from 'vant'
const username = ref('')
const password = ref('')

const onClickRightIcon = (param: string) => {
  if (param === 'username') {
    showToast('账户是:admin')
  } else if (param === 'password') {
    showToast('密码是:123456')
  }
}

const onSubmit = () => {
  if (username.value === 'admin' && password.value === '123456') {
    showNotify({
      type: 'primary',
      message: '登陆成功',
      duration: 1000,
      onOpened: () => {
        location.href = 'https://m.boxuegu.com/'
      }
    })
  } else {
    showNotify('用户名或密码错误,请重新输入')
  }
}
</script>

<template>
  <div class="person-page">
    <van-nav-bar title="个人中心" :border="false" />
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请输入用户名' }]"
          left-icon="contact-o"
          required
          right-icon="question-o"
          @click-right-icon="onClickRightIcon('username')"
          clearable
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
          required
          left-icon="edit"
          right-icon="question-o"
          @click-right-icon="onClickRightIcon('password')"
          clearable
        />
      </van-cell-group>
      <div class="button">
        <van-button block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.van-form {
  margin-top: 20px;

  .van-cell-group {
    margin: 0;
    border-radius: 0;
  }

  .button {
    margin-top: 20px;
  }
}

::v-deep {
  .van-field__label--required:before {
    position: absolute;
    left: 7px;
  }
}
</style>
